<template>
<div>
  <div style="display: flex;grid-gap: 10px">
    <div class="card" style="flex:1;height: 400px;" id="bar"></div>
    <div class="card" style="flex:1;height: 400px;" id="line"></div>
  </div>
  <div></div>
</div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import request from "@/utils/request.js";


// 绘制图表
const barOption = {
  title:{
    text:'用户数量'
  },
  tooltip:{},
  legend:{
    data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
     name:'人数',
      type:'bar',
      data:[],
      itemStyle:{
        normal:{
          color:function (params){
            console.log(params.dataIndex);
            let colors=['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc']
            return colors[params.dataIndex%colors.length]
          }
        }
      }
    }
  ]
};
//onMounted表示所有的dom元素都初始化完
onMounted(elementId=>{
  //基础主备好的dom ，初始化echarts实例
const barChart = echarts.init(document.getElementById('bar'));
request.get('/barData').then(res=>{
  barOption.xAxis.data= res.data.department;//横轴数据
  barOption.series[0].data= res.data.count;//y轴数据
//使用刚指定的配置项和数据显示图表
  barChart.setOption(barOption)
}).catch(l=>{
  console.error('获取图表失败');
})



})

</script>

<style scoped>
.card{
  background: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0  4px rgba(0,0,0,.12);
}
</style>